<template>
  <div v-loading="treeLoading" class="app-container">
    <div class="dept-tree-button">
      <el-button type="primary" @click="toAdd()">添加部门</el-button>
    </div>
    <el-input v-model="filterText" placeholder="根据名称查询" style="margin-bottom:20px;" />
    <el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode" :expand-on-click-node="false" default-expand-all class="dept-tree">
      <span slot-scope="{ node, data }" class="dept-tree-node">
        <span>{{ data.name }}</span>
        <div class="dept-tree-node-button">
          <i class="el-icon-user" @click="delUserDialog(node, data)"><span>删除关联用户</span></i>
          <i class="el-icon-user-solid" @click="addUserDialog(node, data)"><span>关联用户</span></i>
          <i class="el-icon-plus" @click="toAdd(node, data)" />
          <i class="el-icon-edit" @click="toEdit(node, data)" />
          <i class="el-icon-delete" @click="toDelete(node, data)" />
        </div>
      </span>
    </el-tree>
    <el-dialog :title="dialogTitle" width="450px" :close-on-click-modal="false" :visible.sync="showDialog" @close="reset">
      <el-form ref="form" :model="payload" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="上级部门">
          <el-input v-model="payload.parentName" disabled />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="payload.code" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="部门名" prop="name">
          <el-input v-model="payload.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="payload.status" placeholder="请选择状态">
            <el-option label="正常" :value="1" />
            <el-option label="禁用" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门简介" prop="intro">
          <el-input v-model="payload.intro" type="textarea" placeholder="请输入部门简介" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
    <addUserDialog ref="addUserDialog" />
    <delUserDialog ref="delUserDialog" />
  </div>
</template>
<script>
import addUserDialog from './components/addUserDialog.vue'
import delUserDialog from './components/delUserDialog.vue'
export default {
  components: {
    addUserDialog,
    delUserDialog
  },
  data() {
    return {
      treeLoading: false,
      filterText: '',
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showDialog: false,
      dialogTitle: '',
      payload: {},
      rules: {
        code: [{ required: true, message: '请填写部门编码', trigger: 'blur' }, { max: 50, message: '长度小于 50 个字符', trigger: 'blur' }],
        name: [{ required: true, message: '请填写部门名称', trigger: 'blur' }, { max: 50, message: '长度小于 50 个字符', trigger: 'blur' }]
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getTreeData() {
      this.treeLoading = true
      this.$http.request({
        url: `/department/tree`,

        data: {},
        tokenRefresh: () => this.getTreeData()
      }).then(res => {
        this.data2 = res.treeNodes
        this.treeLoading = false
      })
    },
    toAdd (parent, data) {
      if (parent) {
        this.dialogTitle = '添加部门'
        this.payload = { parentId: data.id, parentName: data.name, node: parent }
      } else {
        this.dialogTitle = '添加顶级部门'
        this.payload = { }
      }
      this.showDialog = true
    },
    toEdit (node, data) {
      this.payload = { id: data.id, name: data.name, code: data.code, intro: data.intro, status: data.status, parentId: data.parentId, parentName: data.parentId !== -1 ? node.parent.data.name : '' }
      this.dialogTitle = '编辑'
      this.showDialog = true
    },
    addUserDialog (node, data) {
      const dialog = this.$refs.addUserDialog
      dialog.dialogFormVisible = true
      dialog.departId = data.id
      this.$nextTick(() => {
        dialog.getData()
      })
    },
    delUserDialog (node, data) {
      const dialog = this.$refs.delUserDialog
      dialog.dialogFormVisible = true
      dialog.departId = data.id
      this.$nextTick(() => {
        dialog.getData()
      })
    },
    toDelete (node, data) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.request({
          method: 'delete',
          url: `/department/${data.id}`,

        }).then(res => {
          this.$message.success('删除成功')
          const parent = node.parent
          const children = parent.childNodes
          const index = children.findIndex(d => d.data.id === data.id)
          children.splice(index, 1)
        })
      }).catch(() => {})
    },
    doSave () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        const payload = this.payload
        const isAdd = !payload.id
        const data = { code: payload.code, name: payload.name, intro: payload.intro, status: payload.status, parentId: payload.parentId || -1 }
        if (!isAdd) data.id = payload.id
        this.$http.request({
          method: isAdd ? 'post' : 'put',
          url: isAdd ? `/department` : `/department/${data.id}`,

          data: JSON.stringify(data)
        }).then(() => {
          this.$message.success('保存成功')
          this.showDialog = false
          this.getTreeData()
        })
      })
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="scss">
.dept-tree-node { font-size:14px;line-height:26px; }
.dept-tree .el-tree-node__content { position:relative; }
.dept-tree-node-button { position:absolute;top:0;right:0;padding:0 10px;cursor:default; }
.dept-tree-node-button > i { margin:0 2px;cursor:pointer; }
.dept-tree-button { margin-bottom: 20px; }
.dept-tree-node-button i span { font-size: 12px; color: #a59d9d; }
</style>
